{extend name="default/layout" /}

{block name="title"}{$title}{/block}

{block name="content"}
<!-- 引入西瓜播放器核心 -->
<script src="//unpkg.byted-static.com/xgplayer/2.31.6/browser/index.js" type="text/javascript"></script>
<script src="//unpkg.byted-static.com/xgplayer-hls/2.5.2/dist/index.min.js" charset="utf-8"></script>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    <!-- 面包屑导航 -->
    <nav class="mb-6">
        <ol class="flex items-center space-x-2 text-sm text-gray-500">
            <li><a href="/" class="hover:text-blue-600">首页</a></li>
            <li><span class="mx-2">/</span></li>
            <li><a href="{$goods.url}" class="hover:text-blue-600">{$goods.name}</a></li>
            <li><span class="mx-2">/</span></li>
            <li class="text-gray-900">{$chapter.title}</li>
        </ol>
    </nav>

    <div class="mx-auto">
        <!-- 章节标题 -->
        <div class="mb-6">
            <h1 class="text-2xl font-bold text-gray-900 mb-2">{$chapter.title}</h1>
            <div class="flex items-center space-x-4 text-sm text-gray-500">
                <span class="flex items-center space-x-1">
                    <i class="fas fa-video text-red-500"></i>
                    <span>视频内容</span>
                </span>
                {if $chapter.video_duration}
                <span class="flex items-center space-x-1">
                    <i class="fas fa-clock"></i>
                    <span>{:format_seconds($chapter.video_duration)}</span>
                </span>
                {/if}
                <span>所属商品：{$goods.name}</span>
            </div>
        </div>

        <!-- 视频内容 -->
        <div class="bg-white rounded-sm  border overflow-hidden">
            {if $has_auth}
            {if $chapter.video_url}
            <!-- 视频播放器 -->
            <div id="video-player" class="aspect-video"></div>
            <input type="hidden" id="video-url" value="{$chapter.video_url}">
            {php}
            // 生成一个随机令牌用于视频访问验证
            $token = md5($chapter['video_url'] . time() . rand(1000, 9999));
            {/php}
            <input type="hidden" id="video-token" value="{$token}">
            {/if}

            {if $chapter.content}
            <!-- 视频描述 -->
            <div class="p-6">
                <h3 class="text-lg font-medium text-gray-900 mb-3">视频介绍</h3>
                <div class="prose max-w-none">
                    {$chapter.content|raw}
                </div>
            </div>
            {/if}
            {else}
            <div class="aspect-video bg-gray-100 flex items-center justify-center">
                <div class="text-center">
                    <div class="mb-4">
                        <i class="fas fa-lock text-4xl text-gray-400"></i>
                    </div>
                    <h3 class="text-lg font-medium text-gray-900 mb-2">视频已锁定</h3>
                    <p class="text-gray-500 mb-6">购买商品后即可观看完整视频</p>
                    <a href="{$goods.url}"
                        class="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors">
                        <i class="fas fa-shopping-cart mr-2"></i>
                        立即购买
                    </a>
                </div>
            </div>
            {/if}
        </div>

        <!-- 返回商品详情 -->
        <div class="mt-6 text-center">
            <a href="{$goods.url}"
                class="inline-flex items-center px-4 py-2 bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200 transition-colors">
                <i class="fas fa-arrow-left mr-2"></i>
                返回商品详情
            </a>
        </div>
    </div>
</div>
{/block}

{block name="js"}
<script>
document.addEventListener('DOMContentLoaded', function() {
    if (document.getElementById('video-player')) {
        // 获取隐藏的视频URL和令牌
        var videoUrl = document.getElementById('video-url').value;
        var videoToken = document.getElementById('video-token').value;
        
        // 创建播放器实例
        var player = new Player({
            id: 'video-player',
            url: videoUrl,
            fluid: true,
            autoplay: false,
            playbackRate: [0.5, 0.75, 1, 1.25, 1.5, 2],
            playsinline: true,
            pip: true,
            preventClick: true,
            controls: {
                download: false
            },
            headers: {
                'X-Video-Token': videoToken
            }
        });
        
        // 添加水印
        player.on('ready', function() {
            var watermark = document.createElement('div');
            watermark.className = 'watermark';
            watermark.style.position = 'absolute';
            watermark.style.top = '10px';
            watermark.style.right = '10px';
            watermark.style.color = 'rgba(255, 255, 255, 0.5)';
            watermark.style.fontSize = '14px';
            watermark.style.pointerEvents = 'none';
            watermark.style.zIndex = '10';
            {php}
            // 在webman中正确获取会话用户信息
            $user = session('user');
            $nickname = $user && isset($user['nickname']) ? $user['nickname'] : "骑士专享";
            {/php}
            watermark.innerHTML = '{$nickname}';
            player.root.appendChild(watermark);
            
            // 禁止右键和拖拽
            player.root.addEventListener('contextmenu', function(e) {
                e.preventDefault();
                return false;
            });
            
            player.root.addEventListener('dragstart', function(e) {
                e.preventDefault();
                return false;
            });
        });
    }
});
</script>
{/block}
